<template><div><h1 id="css" tabindex="-1"><a class="header-anchor" href="#css" aria-hidden="true">#</a> css</h1>
<h2 id="_1-快速居中对齐" tabindex="-1"><a class="header-anchor" href="#_1-快速居中对齐" aria-hidden="true">#</a> 1.快速居中对齐</h2>
<div class="language-html line-numbers-mode" data-ext="html"><pre v-pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">clss</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>con<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">></span></span>
            快速居中对齐
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">></span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
    <span class="token selector">body</span><span class="token punctuation">{</span>
        <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector">.con</span> <span class="token punctuation">{</span>
        <span class="token property">margin</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="_2-padding与margin有什么不同" tabindex="-1"><a class="header-anchor" href="#_2-padding与margin有什么不同" aria-hidden="true">#</a> 2.padding与margin有什么不同</h2>
<p><strong>作用对象不同</strong></p>
<p><code v-pre>padding</code>作用于自生</p>
<p><code v-pre>margin</code>作用于外部对象</p>
<h2 id="_3-vw-与-有什么区别" tabindex="-1"><a class="header-anchor" href="#_3-vw-与-有什么区别" aria-hidden="true">#</a> 3.vw 与 % 有什么区别</h2>
<p><code v-pre>%</code>有继承关系</p>
<p><code v-pre>vw</code>只和设备的宽度有关系</p>
<h2 id="_4-行内元素与块级元素" tabindex="-1"><a class="header-anchor" href="#_4-行内元素与块级元素" aria-hidden="true">#</a> 4.行内元素与块级元素</h2>
<p><strong>行内元素</strong></p>
<ul>
<li>不会换行</li>
<li>大小不可以设置大小由内容决定、</li>
</ul>
<p><strong>块级元素</strong></p>
<ul>
<li>宽度有继承关系<code v-pre>默认沾满父级的宽</code></li>
</ul>
<h2 id="_5-如何让浏览器支持小字体" tabindex="-1"><a class="header-anchor" href="#_5-如何让浏览器支持小字体" aria-hidden="true">#</a> 5.如何让浏览器支持小字体</h2>
<p>缩放<code v-pre>transform:scale(0.8)</code></p>
</div></template>


